<template>
    <div class="main-page">
      <header>
        <div class="user-info">
          <h1>欢迎，{{ account }}</h1>
          <p class="login-time">登录时间：{{ loginTime }}</p>
          <p>登录账号：{{ account }}</p>
          <p>登录密码：<span style="color: #ccc;">******</span></p> <!-- 安全原因不显示真实密码 -->
        </div>
        <el-button type="danger" @click="logout">退出登录</el-button>
      </header>
  
      <nav>
        <ul>
          <li><router-link to="/creator">创作者中心</router-link></li>
          <li><router-link to="/video">视频演示</router-link></li>
        </ul>
      </nav>
  
      <main>
        <h2>首页展示</h2>
        <div class="info-card">
          <h3>您的登录信息</h3>
          <p>用户名：{{ account +'111'}}</p>
          <p>登录状态：<el-tag type="success">已登录</el-tag></p>
        </div>
        
        <p>这里是主页的主要内容。</p>
      </main>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      account: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        loginTime: new Date().toLocaleString()
      }
    },
    methods: {
      logout() {
        // 清除本地存储的登录信息
        localStorage.removeItem('token')
        localStorage.removeItem('userInfo')
  
        this.$message.success('退出登录成功')
        this.$router.push('/login')
      }
    }
  }
  </script>
  
  <style scoped>
  .main-page {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f5f7fa;
    border-radius: 4px;
    margin-bottom: 20px;
  }
  
  .user-info {
    display: flex;
    flex-direction: column;
  }
  
  .login-time {
    font-size: 14px;
    color: #909399;
    margin-top: 5px;
  }
  
  nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
  }
  
  nav ul li a {
    text-decoration: none;
    color: #409EFF;
    font-weight: 500;
  }
  
  nav ul li a:hover {
    color: #66b1ff;
  }
  
  .info-card {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
  }
  
  .info-card h3 {
    margin-top: 0;
    color: #409EFF;
  }
  </style>